<template>
  <el-main class="device-goods-main">
    <div class="main-container">
      <el-row :gutter="20">
        <!-- 右侧内容区 -->
        <el-col :span="24">
          <!-- 查询表单区域 -->
          <el-card class="search-card" shadow="hover">
            <el-form :inline="true" :model="queryParams" ref="queryForm" class="search-form">
              <el-form-item label="货物名称">
                <el-input 
                  v-model="queryParams.name" 
                  placeholder="请输入货物名称" 
                  clearable 
                  prefix-icon="Document"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="规格">
                <el-input 
                  v-model="queryParams.specifications" 
                  placeholder="请输入规格" 
                  clearable 
                  prefix-icon="Document"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item class="search-buttons">
                <el-button type="primary" @click="handleQuery" class="search-btn" :icon="Search">
                  查询
                </el-button>
                <el-button @click="resetQuery" class="reset-btn" :icon="Refresh">
                  重置
                </el-button>
                <el-button type="success" @click="handleAdd" class="add-btn" :icon="Plus">
                  新增
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 表格区域 -->
          <el-card class="table-card" shadow="hover">
            <el-table
              v-loading="loading"
              :data="goodsList"
              border
              :height="tableHeight"
              class="data-table"
              highlight-current-row
            >
              <el-table-column type="index" label="序号" width="70" align="center"/>
              <el-table-column prop="name" label="货物名称" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="specifications" label="规格" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="minWeight" label="最小货物重量" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="maxWeight" label="最大货物重量" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="maxLength" label="最大托盘长度" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="minLength" label="最小货架高度" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="cargoPlatformWeight" label="载货台重量" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="weightLowerBeam" label="下梁重量" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="weightUpperBeam" label="上梁重量" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="horizontalFrame" label="水平框架(kg/m)" min-width="130" align="center" show-overflow-tooltip />
              <el-table-column prop="standardCargoPlatformWeight" label="标准载货台重量" min-width="140" align="center" show-overflow-tooltip />
              <el-table-column prop="lowerBeamChannelSteel" label="下梁槽钢(kg/m)" min-width="130" align="center" show-overflow-tooltip />
              <el-table-column prop="standardBeamWeight" label="标准下梁重量" min-width="130" align="center" show-overflow-tooltip />
              <el-table-column label="操作" width="160" fixed="right" align="center">
                <template #default="scope">
                  <div class="action-buttons">
                    <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(scope.row)" class="edit-btn">
                      编辑
                    </el-button>
                    <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row)" class="delete-btn">
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              v-model:current-page="queryParams.current"
              v-model:page-size="queryParams.size"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              class="pagination"
              @size-change="getList"
              @current-change="getList"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 添加或修改货物设置对话框 -->
    <el-dialog 
      :title="title" 
      v-model="dialogVisible" 
      width="700px" 
      append-to-body
      class="goods-dialog"
    >
      <el-scrollbar height="100%" class="form-scrollbar">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="goods-form">
          <el-card class="form-card" shadow="never">
            <template #header>
              <div class="form-header">
                <el-icon><Document /></el-icon>
                <span>基本信息</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="货物名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入货物名称" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格" prop="specifications">
                  <el-input v-model="form.specifications" placeholder="请输入规格" clearable />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="上梁重量" prop="weightUpperBeam">
                  <el-input 
                    v-model="form.weightUpperBeam" 
                    placeholder="请输入上梁重量" 
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下梁重量" prop="weightLowerBeam">
                  <el-input 
                    v-model="form.weightLowerBeam" 
                    placeholder="请输入下梁重量" 
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="载货台重量" prop="cargoPlatformWeight">
                  <el-input 
                    v-model="form.cargoPlatformWeight" 
                    placeholder="请输入载货台重量" 
                    clearable
                  />
                </el-form-item>
              </el-col>
           
            </el-row>
          </el-card>

          <el-card class="form-card" shadow="never">
            <template #header>
              <div class="form-header">
                <el-icon><Setting /></el-icon>
                <span>参数设置</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="最小货物重量" prop="minWeight">
                  <el-input-number 
                    v-model="form.minWeight" 
                    placeholder="请输入最小货物重量" 
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    class="full-width"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最大货物重量" prop="maxWeight">
                  <el-input-number 
                    v-model="form.maxWeight" 
                    placeholder="请输入最大货物重量" 
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    class="full-width"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="最小货架高度" prop="minLength">
                  <el-input-number 
                    v-model="form.minLength" 
                    placeholder="请输入最小货架高度" 
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    class="full-width"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="最大托盘长度" prop="maxLength">
                  <el-input-number 
                    v-model="form.maxLength" 
                    placeholder="请输入最大托盘长度" 
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    class="full-width"
                  />
                </el-form-item>
              </el-col>
            </el-row>
        
          </el-card>

          <el-card class="form-card" shadow="never">
            <template #header>
              <div class="form-header">
                <el-icon><Setting /></el-icon>
                <span>新增参数</span>
              </div>
            </template>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="水平框架(kg/m)" prop="horizontalFrame">
                  <el-input 
                    v-model="form.horizontalFrame" 
                    placeholder="请输入水平框架kg/m" 
                    clearable 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标准载货台重量" prop="standardCargoPlatformWeight">
                  <el-input 
                    v-model="form.standardCargoPlatformWeight" 
                    placeholder="请输入标准载货台重量1m*1.2m" 
                    clearable 
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="下梁槽钢(kg/m)" prop="lowerBeamChannelSteel">
                  <el-input 
                    v-model="form.lowerBeamChannelSteel" 
                    placeholder="请输入下梁槽钢kg/m" 
                    clearable 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标准下梁重量" prop="standardBeamWeight">
                  <el-input 
                    v-model="form.standardBeamWeight" 
                    placeholder="请输入标准下梁重量1m*1.2m" 
                    clearable 
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelForm">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-main>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { 
  getDeviceGoodsList, 
  getDeviceGoodsDetail, 
  addDeviceGoods, 
  updateDeviceGoods, 
  deleteDeviceGoods
} from '@/api/deviceGoods';
import type { DeviceGoods, DeviceGoodsQuery } from '@/types/deviceGoods';
import { Search, Refresh, Plus, Edit, Delete, Document, Setting } from '@element-plus/icons-vue';

// 遮罩层
const loading = ref(true);
// 总条数
const total = ref(0);
// 货物表格数据
const goodsList = ref<DeviceGoods[]>([]);
// 弹出层标题
const title = ref('');
// 是否显示弹出层
const dialogVisible = ref(false);
// 表格高度自适应
const tableHeight = ref(0);

// 查询参数
const queryParams = reactive<DeviceGoodsQuery>({
  current: 1,
  size: 10,
  name: '',
  specifications: ''
});

// 表单参数
const form = reactive<DeviceGoods>({
  id: undefined,
  name: '',
  specifications: '',
  minWeight: undefined,
  maxWeight: undefined,
  maxLength: undefined,
  minLength: undefined,
  cargoPlatformWeight: '',
  weightLowerBeam: '',
  weightUpperBeam: '',
  horizontalFrame: '',
  standardCargoPlatformWeight: '',
  lowerBeamChannelSteel: '',
  standardBeamWeight: ''
});

// 表单校验
const rules = {
  name: [
    { required: true, message: '货物名称不能为空', trigger: 'blur' }
  ],
  specifications: [
    { required: true, message: '规格不能为空', trigger: 'blur' }
  ],
  minWeight: [
    { required: true, message: '最小货物重量不能为空', trigger: 'blur' }
  ],
  maxWeight: [
    { required: true, message: '最大货物重量不能为空', trigger: 'blur' }
  ]
};

const queryForm = ref<FormInstance>();
const formRef = ref<FormInstance>();

// 设置表格高度
const handleResize = () => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 260;
  });
};

onMounted(() => {
  getList();
  handleResize();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

// 查询货物设置列表
const getList = () => {
  loading.value = true;
  getDeviceGoodsList(queryParams).then((res: any) => {
    goodsList.value = res.data.records || [];
    total.value = res.data.total || 0;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

// 搜索按钮操作
const handleQuery = () => {
  queryParams.current = 1;
  getList();
};

// 重置按钮操作
const resetQuery = () => {
  queryForm.value?.resetFields();
  queryParams.name = '';
  queryParams.specifications = '';
  handleQuery();
};

// 表单重置
const reset = () => {
  form.id = undefined;
  form.name = '';
  form.specifications = '';
  form.minWeight = undefined;
  form.maxWeight = undefined;
  form.maxLength = undefined;
  form.minLength = undefined;
  form.cargoPlatformWeight = '';
  form.weightLowerBeam = '';
  form.weightUpperBeam = '';
  form.horizontalFrame = '';
  form.standardCargoPlatformWeight = '';
  form.lowerBeamChannelSteel = '';
  form.standardBeamWeight = '';
  formRef.value?.resetFields();
};

// 新增按钮操作
const handleAdd = () => {
  reset();
  dialogVisible.value = true;
  title.value = '添加货物设置';
};

// 修改按钮操作
const handleEdit = (row: DeviceGoods) => {
  reset();
  const id = row.id as number;
  getDeviceGoodsDetail(id).then((res: any) => {
    Object.assign(form, res.data);
    dialogVisible.value = true;
    title.value = '修改货物设置';
  });
};

// 提交按钮
const submitForm = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (form.id) {
        updateDeviceGoods(form).then(() => {
          ElMessage.success('修改成功');
          dialogVisible.value = false;
          getList();
        });
      } else {
        addDeviceGoods(form).then(() => {
          ElMessage.success('新增成功');
          dialogVisible.value = false;
          getList();
        });
      }
    }
  });
};

// 删除按钮操作
const handleDelete = (row: DeviceGoods) => {
  const id = row.id as number;
  ElMessageBox.confirm('是否确认删除该货物设置？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteDeviceGoods(id).then(() => {
      getList();
      ElMessage.success('删除成功');
    });
  });
};

// 取消按钮
const cancelForm = () => {
  dialogVisible.value = false;
  reset();
};
</script>

<style scoped lang="scss">
.device-goods-main {
  padding: 0;
}

.main-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s;
  
  :deep(.el-card__body) {
    padding: 15px 20px;
  }
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
  .el-form-item {
    margin-bottom: 0;
    margin-right: 16px;
  }
  
  .search-buttons {
    margin-left: auto;
    
    .el-button {
      margin-left: 8px;
      transition: all 0.3s;
      
      &:first-child {
        margin-left: 0;
      }
    }
    
    .search-btn {
      background: linear-gradient(135deg, #1989fa, #0056b3);
      border: none;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
      }
    }
    
    .add-btn {
      background: linear-gradient(135deg, #67c23a, #409eff);
      border: none;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
      }
    }
    
    .reset-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(144, 147, 153, 0.2);
    }
  }
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  height: calc(100vh - 180px);
  margin-bottom: 0;
  
  :deep(.el-card__body) {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.data-table {
  border-radius: 4px;
  flex: 1;
  
  :deep(.el-table__header-wrapper) {
    th {
      background-color: #f2f6fc;
      font-weight: 600;
    }
  }
  
  :deep(.el-table__row) {
    &:hover {
      td {
        background-color: #ecf5ff;
      }
    }
  }
  
  .action-buttons {
    display: flex;
    justify-content: center;
    
    .el-button {
      padding: 6px 10px;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
      }
    }
    
    .edit-btn {
      margin-right: 10px;
    }
  }
}

.pagination {
  padding: 15px 20px;
  justify-content: flex-end;
  background: #fff;
  border-radius: 0 0 8px 8px;
}

// 弹窗样式
:deep(.goods-dialog) {
  border-radius: 8px;
  overflow: hidden;
  
  .el-dialog__header {
    padding: 15px 20px;
    margin: 0;
    background: linear-gradient(90deg, #f0f9eb, #e1f3d8);
    border-bottom: 1px solid #e1f3d8;
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
      color: #67c23a;
    }
    
    .el-dialog__headerbtn {
      top: 15px;
    }
  }
  
  .el-dialog__body {
    padding: 0;
  }
  
  .el-dialog__footer {
    padding: 10px 20px;
    border-top: 1px solid #ebeef5;
    background-color: #f5f7fa;
    
    .el-button {
      padding: 8px 20px;
      border-radius: 4px;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.form-scrollbar {
  max-height: calc(80vh - 120px);
  overflow-y: auto;
}

.goods-form {
  padding: 20px;
  
  .form-card {
    margin-bottom: 15px;
    border-radius: 8px;
    transition: all 0.3s;
    overflow: hidden;
    border: 1px solid #ebeef5;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    :deep(.el-card__header) {
      padding: 10px 15px;
      background: linear-gradient(90deg, #f0f9eb, #e1f3d8);
      border-bottom: 1px solid #e1f3d8;
    }
    
    .form-header {
      font-size: 16px;
      font-weight: 600;
      color: #67c23a;
      display: flex;
      align-items: center;
      gap: 8px;
      
      .el-icon {
        color: #67c23a;
      }
    }
  }

  :deep(.el-input), :deep(.el-select), :deep(.el-input-number) {
    width: 100%;
  }
  
  :deep(.el-input__wrapper), :deep(.el-textarea__inner) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    
    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px #67c23a inset;
    }
  }
  
  :deep(.el-form-item__label) {
    font-weight: 500;
  }
}

.full-width {
  width: 100%;
}
</style> 